<template>
  <div class="home-content">
    <iv-row>
      <iv-col :xs="500" :sm="500" :md="500" :lg="500">
        <div class="dev-sign-main ivu-card ivu-card-dis-hover ivu-card-shadow">
          <!---->
          <!---->
          <div class="ivu-card-body">
            <iv-form
              autocomplete="off"
              class="ivu-form ivu-form-label-top"
              ref="registForm"
              :model="form"
              :rules="rules"
              @keydown.enter.native="handleSubmit"
            >
              <div class="ivu-form-item ivu-form-item-required ivu-form-item-error">
                <label class="ivu-form-item-label">电子邮箱</label>
                <iv-formItem prop="userName">
                  <iv-input type="text" placeholder="请填写你的电子邮箱" v-model="form.userName">
                    <iv-button style="height: 30px" slot="append" @click="ToEmail">
                      <div class="iconfont icon-youxiang1" style="margin-top: -10px"></div>
                    </iv-button>
                  </iv-input>
                </iv-formItem>
              </div>
              <div class="ivu-form-item ivu-form-item-required ivu-form-item-error">
                <label class="ivu-form-item-label">新密码</label>
                <iv-formItem prop="password">
                  <iv-input
                    autocomplete="off"
                    password
                    type="password"
                    v-model="form.password"
                    placeholder="请输入密码"
                  />
                </iv-formItem>
              </div>
              <div class="ivu-form-item ivu-form-item-required ivu-form-item-error">
                <label class="ivu-form-item-label">验证码</label>
                <iv-formItem prop="code">
                  <iv-input
                    autocomplete="off"
                    v-model="form.code"
                    placeholder="请输入验证码"
                    style="width: 150px"
                    :maxlength="6"
                  />
                  <a
                    @click="ToEmail"
                    :disabled="disabled"
                    style="margin-left: 15px"
                  >
                    没有收到验证码？再来一条</a
                  >
                </iv-formItem>
              </div>
            </iv-form>
            <div class="dev-sign-main-aside">
              <iv-button
                class="ivu-btn ivu-btn-success ivu-btn-long ivu-btn-large"
                @click="rePassword"
              >
                <i class="ivu-icon ivu-icon-md-log-in"></i>
                <span>找回密码</span>
              </iv-button>
              <div class="dev-sign-main-aside-tip">
                <p style="margin-top: 20px">
                  还没有账户？
                  <router-link to="/regist" class="">注册</router-link>
                </p>
                <p style="margin-top: 5px">
                  已有有账户？
                  <router-link to="/login">登录</router-link>
                </p>
              </div>
            </div>
          </div>
        </div>
      </iv-col>
    </iv-row>
  </div>
</template>

<script type="text/ecmascript-6">
import 'vue-nav-tabs/themes/paper.css'
import {mixin} from '@/utils'

export default {
  name: "registForm",
  props: {
    userNameRules: {
      type: Array,
      default: () => {
        return [
          {required: true, message: '账号不能为空', trigger: 'blur'}
        ]
      }
    },
    passwordRules: {
      type: Array,
      default: () => {
        return [
          {required: true, message: '密码不能为空', trigger: 'blur'}
        ]
      }
    },
    codeRules: {
      type: Array,
      default: () => {
        return [{required: true, message: "验证码不能为空", trigger: "blur"}];
      },
    },
  },
  data() {
    return {
      show: true,
      send: "",
      timer: "",
      modal: false,
      disabled: false,
      //加密后请求服务器的参数
      res: {
        requestData: "",
      },
      form: {
        userName: "",
        password: "",
        code: "",
      },
    };
  },
  mixins: [mixin],
  computed: {
    rules() {
      return {
        userName: this.userNameRules,
        password: this.passwordRules,
        code: this.codeRules,
      };
    },
  },
  methods: {
    ToEmail() {
      if (this.form.userName === null || this.form.userName === '') {
        this.$Message.error('请填写你的邮箱哦！')
        return
      }
      var re = /[^`~!@#$%\^&\var*\(\)\+=\|\{\}\':;\',\\\[\]<>\/\?~！@#￥%……&\*（）——+\|\{\}【】‘；：”“’。，、？\s]{1,}@[^`~!@#$%\^&\*\(\)\+=\|\{\}\':;\',\\\[\]\.<>\/\?~！@#￥%……&\*（）——+\|\{\}【】‘；：”“’。，、？\s]{1,}\.[^`~!@#$%\^&\*\(\)\+=\|\{\}\':;\',\\\[\]<>\/\?~！@#￥%……&\*（）——+\|\{\}【】‘；：”“’。，、？\s]{1,}/i;
      if (!re.test(this.form.userName)) {
        this.$Message.warning({
          content: "请填写正确邮箱哦！",
          duration: 3,
          top: 50,
          backgroun: true,
        });
        return;
      }
      let params = {
        username: this.form.userName,
        type: 1
      }
      this.$http({
        url: this.$http.adornUrl('/login/sendOutEmail'),
        method: 'post',
        data: this.$https.adornDatas(params)
      }).then(({data}) => {
        if (data && data.status === 0) {
          this.$Message.success('请在你的' + this.form.userName + '的邮箱下查收验证码哦');
        }
      }).catch(() => {

      });
    },
    rePassword() {
      if (this.form.userName === null || this.form.userName === "") {
        this.$Message.error("请输入你的邮箱哦！");
        return;
      }
      if (this.form.password === null || this.form.password === "") {
        this.$Message.error("请输入你的密码哦！");
        return;
      }
      if (this.form.code === null || this.form.code === "") {
        this.$Message.error("请输入验证码哦！");
        return;
      }
      var re = /[^`~!@#$%\^&\var*\(\)\+=\|\{\}\':;\',\\\[\]<>\/\?~！@#￥%……&\*（）——+\|\{\}【】‘；：”“’。，、？\s]{1,}@[^`~!@#$%\^&\*\(\)\+=\|\{\}\':;\',\\\[\]\.<>\/\?~！@#￥%……&\*（）——+\|\{\}【】‘；：”“’。，、？\s]{1,}\.[^`~!@#$%\^&\*\(\)\+=\|\{\}\':;\',\\\[\]<>\/\?~！@#￥%……&\*（）——+\|\{\}【】‘；：”“’。，、？\s]{1,}/i;
      if (!re.test(this.form.userName)) {
        this.$Message.warning("请填写正确邮箱哦！");
        return;
      }
      let params = {
        username: this.form.userName,
        password: this.form.password,
        code: this.form.code
      };
      this.$http({
        url: this.$http.adornUrl('/rePassword'),
        method: 'post',
        data: this.$https.adornDatas(params)
      }).then(({data}) => {
        console.log(JSON.stringify(data))
        if (data && data.status === 0) {
          this.$Message.success('注册成功，请移步登录页面登录！')
          this.$router.push({path: "/login"});
        } else {
          this.$Message.error(data.errorMsg)
        }
      })
    },

    handleSubmit() {
      this.$refs.registForm.validate((valid) => {
        if (valid) {
          this.$emit("on-success-valid", {
            username: this.form.username,
            password: this.form.password,
          });
        }
      });
    },
  },
};
</script>
<style lang="stylus" type="text/stylus" rel="stylesheet/stylus">
@import "../../common/stylus/theme.styl";
@import "../../common/stylus/article.styl";

.home-content
  width auto
  min-height calc(100vh - 108px)
  @media only screen and (max-width: 768px)
    margin 5px 5px 0 5px
  @media screen and (min-width: 768px)
    margin 10px 10px 0 10px
  @media screen and (min-width: 992px)
    margin 15px 35px 0 35px
  @media screen and (min-width: 1200px)
    width 1200px
    margin 15px auto 0
    margin-bottom 200px

  .layout-left, .layout-right
    padding 0
    @media only screen and (max-width: 768px)
      padding 0
    @media screen and (min-width: 768px)
      padding 0
    @media screen and (min-width: 992px)
      padding 0 10px
    @media screen and (min-width: 1200px)
      padding 0 10px

/*.live-bg{
  background-image:url({{this.imgUrl}})
}*/

element.style {
}

.dev-sign-main {
  width: 400px;
  margin: 50px auto;
  padding: 0 16px;
}

.ivu-card-shadow {
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .1);
}

.ivu-card {
  background: #FAFAFA;
  border-radius: 4px;
  font-size: 14px;
  position: relative;
  transition: all .2s ease-in-out;
}

article, aside, blockquote, body, button, dd, details, div, dl, dt, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, iv-input, legend, li, menu, nav, ol, p, section, td, textarea, th, ul {
  margin: 0;
  padding: 0;
}

*, :after, :before {
  box-sizing: border-box;
}

* {
  -webkit-tap-highlight-color: transparent;
}

user agent stylesheet
div {
  display: block;
}

* {
  -webkit-tap-highlight-color: transparent;
}

* {
  -webkit-tap-highlight-color: transparent;
}

* {
  -webkit-tap-highlight-color: transparent;
}

* {
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, \\5FAE\8F6F\96C5\9ED1, Arial, sans-serif;
  font-size: 12px;
  line-height: 1.5;
  color: #515a6e;
  background-color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* {
  -webkit-tap-highlight-color: transparent;
}

html {
  font-family: sans-serif;
  line-height: 1.15;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

* {
  -webkit-tap-highlight-color: transparent;
}

*, :after, :before {
  box-sizing: border-box;
}

*, :after, :before {
  box-sizing: border-box;
}

.lizi {
  position: absolute;
  top: 0;
  left: 0;
  height: calc(100VH - 66px);
  width: 100VW;
  z-index: -1;
}

html, body {
  width: 100%;
}
</style>
